<template>
    <div>
        <h1>食谱添加</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">菜谱标题</td>
                    <td><input type="text" v-model="info.ftitle"></td>
                </tr>
                <tr>
                    <td align="right">菜谱封面</td>
                    <td>
                        <input type="file" @change="img">
                        <img :src="info.ftp" width="80px" height="100px" v-if="info.ftp != ''">
                    </td>
                </tr>
                <tr>
                    <td align="right">标签</td>
                    <td>
                        <select v-model="info.fbq">
                            <option value="">请选择</option>
                            <option value="清蒸">清蒸</option>
                            <option value="红烧">红烧</option>
                            <option value="熬煮">熬煮</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">分类</td>
                    <td>
                        <select v-model="info.ftype">
                            <option value="">请选择</option>
                            <option v-for="item in data" :value="item.tname">{{ item.tname }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">发布时间</td>
                    <td>
                        <input type="radio" name="a" :value="1" v-model="info.ffb">立即发布
                        <input type="radio" name="a" :value="0" v-model="info.ffb">定时发布
                        <input type="date" v-model="info.fdate" v-if="info.ffb == '0'">
                        <input type="time" v-model="info.ftime" v-if="info.ffb == '0'">
                    </td>
                </tr>
                <tr>
                    <td align="right">菜谱详细</td>
                    <td>
                        <textarea cols="20" rows="5" v-model="info.fxx"></textarea>
                    </td>
                </tr>
                <tr>
                    <td align="right"></td>
                    <td><input type="button" class="btn btn-primary" value="添加" @click="add"></td>
                </tr>

            </tbody>
        </table>

    </div>
</template>

<script setup lang="ts">

import axios from 'axios'
import { ref, reactive, onMounted } from 'vue'
import moment from 'moment'
import 'bootstrap/dist/css/bootstrap.css'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter();
const route = useRoute();

let info: any = reactive({
    "ftitle": "",
    "ftp": "",
    "fbq": "",
    "ftype": "",
    "ffb": 1,
    "fdate": new Date,
    "ftime": "",
    "fxx": ""
})

let data: any = ref([])

onMounted(() => {
    xlk();
})

const xlk = () => {
    axios({
        url: '/api/Foot/Showxlk',
        method: 'get',
    })
        .then(res => {
            console.log(res);
            data.value = res.data
        })
}

const add = () => {
    if (info.ftitle == '') {
        alert('标题不能为空');
        return;
    }
    if (info.ftp == '') {
        alert('图片不能为空');
        return;
    }
    if (info.fbq == '') {
        alert('标签必选');
        return;
    }
    if (info.ftype == '') {
        alert('分类必选');
        return;
    }
    if (info.fxx == '') {
        alert('详细不能为空');
        return;
    }
    axios({
        url: '/api/Foot/AddFoot',
        method: 'post',
        data: info
    })
        .then(res => {
            console.log(res);
            if (res.data > 0) {
                alert('添加成功');
                router.push('/footshow')
            }
            else {
                alert('添加失败');
                return;
            }
        })
}

const img = (e: any) => {
    let obj = e.target.files[0];
    let f = new FormData();
    f.append("file", obj);
    axios({
        url: '/api/img/Upload',
        method: 'post',
        data: f
    })
        .then(res => {
            console.log(res);
            if (res.data == '不是图片') {
                alert('不是图片');
                return;
            }
            else if (res.data == '不能大于2兆') {
                alert('不能大于2兆');
                return;
            }
            else {
                info.ftp = res.data
            }
        })
}

</script>

<style scoped></style>